<template>
  <div class="pageContent padding-trbl-20 margin-b-60">
    <div class="modular_1">
      <!-- 工单情况统计 -->
      <div class="flex-row">
        <el-card class="box-card card3Box width100">
          <Title title="已完成工单情况统计"></Title>
          <div class="padding-l-30 margin-t-60 flex-row row-between">
            <div
              class="orderStateItem border-right padding-r-30 padding-l-30"
              v-for="(item, index) in orderState"
              :key="index"
              :class="index == 0 || index == 2 || index == 6 ? 'pointer' : ''"
              @click="
                index == 0 || index == 2 || index == 6
                  ? orderListChange(
                      'year',
                      index == 2 ? 'chaoqiwancheng' : null,
                      index == 6 ? true : null
                    )
                  : ''
              "
            >
              <div class="font-14 text-gray">{{ item.title }}</div>
              <div class="font-46" :style="{ color: orderStateColor[index] }">
                {{ item.number }}
                <span
                  class="font-14 text-gray line-block"
                  v-if="index == 0 || index == 2 || index == 6"
                  >件</span
                >
                <span
                  class="font-14 text-gray line-block"
                  v-if="index == 1 || index == 4 || index == 5"
                  >%</span
                >
                <span class="font-14 text-gray line-block" v-if="index == 3"
                  >天</span
                >
              </div>
              <LineProgress
                class="margin-t-40"
                :title="item.state ? '环比去年增长' : '环比去年下降'"
                :percentage="item.percentage >= 100 ? 100 : item.percentage"
                :showtextVal="item.showTextVal"
                :showtext="false"
                :strokeWidth="10"
                titleColor="#5673ca"
                :percentageColor="item.percentageColor"
                :icon="item.icon"
                :type="index == 3 ? 'hfzq' : ''"
              ></LineProgress>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 工单办理量统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card2Box margin-r-20">
          <Title title="工单办理量统计"></Title>
          <div class="flex-row row-between padding-lr-30">
            <div
              class="wordOrderItem text-white padding-lr-30 rela pointer"
              @click="orderListChange('year')"
            >
              <div class="content abso abso-center rela">
                <div class="font-24">本年</div>
                <div class="margin-t-10">
                  <span class="font-42">{{ getGdblltj_r.gdbblCurY }}</span> 件
                </div>
                <div>
                  <LineProgress
                    class="margin-t-10"
                    :title="
                      getGdblltj_r.addY == true
                        ? '环比去年增长'
                        : '环比去年下降'
                    "
                    :percentage="
                      getGdblltj_r.hbqnYPct >= 100 ? 100 : getGdblltj_r.hbqnYPct
                    "
                    :showtextVal="getGdblltj_r.showtextYPct"
                    :showtext="false"
                    :strokeWidth="10"
                    titleColor="#ffffff"
                    percentageColor="#ffffff"
                    :icon="getGdblltj_r.addY ? 'rise2' : 'decline2'"
                    trendImgColor="white"
                  ></LineProgress>
                </div>
              </div>
              <div class="card_shadow abso">
                <img
                  src="../../../assets/images/card_shadow01.png"
                  class="width100"
                />
              </div>
            </div>
            <div
              class="wordOrderItem text-white padding-lr-30 rela pointer"
              @click="orderListChange('month')"
            >
              <div class="content abso abso-center rela">
                <div class="font-24">本月</div>
                <div class="margin-t-10">
                  <span class="font-42">{{ getGdblltj_r.gdbblCurM }}</span> 件
                </div>
                <div>
                  <LineProgress
                    class="margin-t-10"
                    :title="getGdblltj_r.addM ? '环比上月增长' : '环比上月下降'"
                    :percentage="
                      getGdblltj_r.gdbblCurM == 0
                        ? 0
                        : getGdblltj_r.hbqnMPct >= 100
                        ? 100
                        : getGdblltj_r.hbqnMPct
                    "
                    :showtextVal="
                      getGdblltj_r.gdbblCurM == 0
                        ? 0
                        : getGdblltj_r.showtextMPct
                    "
                    :showtext="false"
                    :strokeWidth="10"
                    titleColor="#ffffff"
                    percentageColor="#ffffff"
                    :icon="getGdblltj_r.addM ? 'rise2' : 'decline2'"
                    trendImgColor="white"
                  ></LineProgress>
                </div>
              </div>
              <div class="card_shadow abso">
                <img
                  src="../../../assets/images/card_shadow02.png"
                  class="width100"
                />
              </div>
            </div>
            <div
              class="wordOrderItem text-white padding-lr-30 rela pointer"
              @click="orderListChange('date')"
            >
              <div class="content abso abso-center rela">
                <div class="font-24">本日</div>
                <div class="margin-t-10">
                  <span class="font-42">{{ getGdblltj_r.gdbblCurD }}</span> 件
                </div>
                <div>
                  <LineProgress
                    class="margin-t-10"
                    :title="getGdblltj_r.addD ? '环比昨日增长' : '环比昨日下降'"
                    :percentage="
                      getGdblltj_r.hbqnDPct >= 100 ? 100 : getGdblltj_r.hbqnDPct
                    "
                    :showtextVal="getGdblltj_r.showtextDPct"
                    :showtext="false"
                    :strokeWidth="10"
                    titleColor="#ffffff"
                    percentageColor="#ffffff"
                    :icon="getGdblltj_r.addD ? 'rise2' : 'decline2'"
                    trendImgColor="white"
                  ></LineProgress>
                </div>
              </div>
              <div class="card_shadow abso">
                <img
                  src="../../../assets/images/card_shadow03.png"
                  class="width100"
                />
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card card1Box">
          <Title title="预警件统计"></Title>
          <div class="card1 flex-row padding-l-20">
            <div class="card1_r flex-row">
              <div
                class="index_card1Echart margin-r-40"
                id="index_card1Echart"
              ></div>
              <div class="card1EchartList">
                <div
                  class="card1EchartItem flex-row pointer"
                  :class="index < 2 ? 'margin-b-20' : ''"
                  v-for="(item, index) in workOrderNumber"
                  :key="index"
                  @click="
                    orderListChange(
                      'year',
                      item.name == '已超期件' ? 'chaoqituijin' : 'jijiangchaoqi'
                    )
                  "
                >
                  <div
                    class="card1EchartItem_l font-12 padding-l-20 rela text-gray"
                  >
                    <span
                      class="abso"
                      :class="{
                        'bg-pure-red': index == 0,
                        'bg-orange': index == 2,
                        'bg-rose-red1': index == 1
                      }"
                    ></span
                    >{{ item.name }}
                  </div>
                  <div class="card1EchartItem_c font-14 text-right text-gray">
                    <span
                      class="font-24 text-light-oragen line-block"
                      :class="{
                        'text-pure-red': index == 0,
                        'text-rose-red1': index == 1,
                        'text-orange': index == 2
                      }"
                      >{{ item.value }}</span
                    >件
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 全年月度工单处理量统计 -->
      <div class="flex-row margin-t-20">
        <el-card class="box-card card8Box width100 rela">
          <Title title="全年月度工单处理量统计"></Title>
          <div class="text-gray font-12 company abso">
            单位：件
          </div>
          <div class="card8Echart" id="card8Echart"></div>
        </el-card>
      </div>
    </div>
    <div class="modular_2 margin-t-20">
      <div class="card1 width100">
        <el-card class="rela">
          <Title title="部门办理量统计"></Title>
          <div class="text-gray font-12 company abso">
            单位：件
          </div>
          <div class="bumen_card1Echart" id="bumen_card1Echart"></div>
        </el-card>
      </div>
      <div class="flex-row width100 margin-t-20">
        <div class="card2 margin-r-20">
          <el-card>
            <Title title="部门满意率统计"></Title>
            <div class="bumen_card2Echart" id="bumen_card2Echart"></div>
          </el-card>
        </div>
        <div class="card3">
          <el-card>
            <Title title="部门退件率统计"></Title>
            <div class="card4_r flex-row margin-t-80">
              <div class="bumen_card3Echart" id="bumen_card3Echart"></div>
              <div class="card3EchartList">
                <div
                  class="card3EchartItem flex-row"
                  :class="index > 0 ? 'margin-t-10' : ''"
                  v-for="(item, index) in tjList"
                  :key="index"
                >
                  <div
                    class="card3EchartItem_l font-12 padding-l-20 rela text-gray"
                  >
                    <span
                      class="abso"
                      :style="{ background: item.color }"
                    ></span
                    >{{ item.name }}
                  </div>
                  <div
                    class="card3EchartItem_c font-14 text-right text-gray flex-row"
                  >
                    <div class="card3EchartItem_c_l">
                      <span
                        class="font-24 text-light-oragen line-block"
                        :style="{ color: item.color }"
                        >{{ item.value
                        }}<span class="font-12 text-gray">%</span></span
                      >
                    </div>
                    <div
                      class="card3EchartItem_c_r text-left"
                      :style="{
                        color: item.state == 'rise' ? '#FF4444' : '#25D17F'
                      }"
                    >
                      <span
                        class="font-12 line-block margin-l-20"
                        v-if="item.state == 'rise'"
                        ><img
                          src="../../../assets/images/rise3.png"
                          class="trendImg"
                        />{{ item.stateVal }}%</span
                      >
                      <span class="font-12 line-block margin-l-20" v-else
                        ><img
                          src="../../../assets/images/decline3.png"
                          class="trendImg"
                        />{{ item.stateVal }}%</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="width100 card4 margin-t-20 bjlBox">
        <el-card>
          <Title title="部门办结率统计"></Title>
          <div class="lineProgressBox">
            <lineProgress2 :list="card4Data"></lineProgress2>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 工单列表 -->
    <el-dialog
      title="工单列表"
      :visible.sync="orderListShow"
      width="100%"
      :fullscreen="fullScreen"
      @close="clearSearch"
    >
      <orderList
        v-if="orderListShow"
        ref="orderlist"
        :duration="duration"
        :date="date"
        :deptId="deptId"
        :orderType="orderType"
        :multiDiliver="multiDiliver"
        :empId="empId"
      ></orderList>
    </el-dialog>
  </div>
</template>

<script>
import Title from '../../../components/title.vue'
import LineProgress from '../../../components/lineProgress/lineProgress.vue'
import lineProgress2 from '../../../components/lineProgress/lineProgress2.vue'
import * as echarts from 'echarts'
import orderList from '../reportform/order/orderlist.vue'
export default {
  components: {
    Title,
    LineProgress,
    lineProgress2,
    orderList
  },
  data () {
    return {
      // 工单办理量 左
      getGdblltj_l: [],
      // 预警件 左 环形图
      workOrderNumber: [],
      // 工单办理量 右
      getGdblltj_r: {},
      // 工单情况统计
      orderState: [],
      orderStateColor: [
        '#9865ff',
        '#35ca1c',
        '#ff3a3a',
        '#6d9fff',
        '#ff902e',
        '#35ca1c',
        '#ff39d7'
      ],
      systemYear: '',
      monthList: [
        '01月',
        '02月',
        '03月',
        '04月',
        '05月',
        '06月',
        '07月',
        '08月',
        '09月',
        '10月',
        '11月',
        '12月'
      ],
      tjList: [],
      card4Data: [],
      orderListShow: false,
      fullScreen: true,
      duration: null,
      date: null,
      deptId: null,
      orderType: null,
      multiDiliver: null,
      empId: null
    }
  },
  mounted () {
    const loginInfo = JSON.parse(
      window.sessionStorage.getItem('GOVERNANCE_USER_INFO')
    )
    this.deptId = loginInfo.deptId
    this.empId = loginInfo.userId
    console.log('empId', this.empId)

    const date = new Date()
    this.systemYear = date.getFullYear()
    this.getGdblltjL()
    this.getGdblltjR()
    this.getGdqktj()
    this.getGdMonthForYear()
    this.getBmblTj()
    this.getBmMylTj()
    this.getBmThl()
    this.getBmBjl()
  },
  methods: {
    // 获取数据 预警件统计
    async getGdblltjL () {
      const that = this
      this.$axios.post(this.$api.homeCharts.getGrGdblltj_y).then(res => {
        if (res) {
          that.getGdblltj_l = res
          that.getGdblltj_l.showtextVal = parseFloat(
            res.hbqnPct.toFixed(2)
          ).toString()
          that.getGdblltj_l.hbqnPct = Math.round(res.hbqnPct)
          that.workOrderNumber = [
            { value: res.cqtj, name: '已超期件' },
            // {value: res.wqs, name: '待分发'},
            { value: res.jjcq, name: '即将超期' }
          ]
          const sy_chartDom5 = document.getElementById('index_card1Echart')
          const sy_myChart5 = echarts.init(sy_chartDom5)
          const sy_option5 = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              show: false,
              top: '0px',
              left: 'left',
              orient: 'vertical'
            },
            series: [
              {
                type: 'pie',
                name: '预警件',
                color: ['#ff5858', '#ff2dd5', '#ff902d'],
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                legendHoverLink: false,
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#fff',
                  borderWidth: 5
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.workOrderNumber
              }
            ]
          }
          sy_option5 && sy_myChart5.setOption(sy_option5)
          setTimeout(function () {
            window.onresize = function () {
              sy_myChart5.resize()
            }
          }, 200)
          sy_myChart5.on('click', function (params) {
            if (params.name == '已超期件') {
              that.orderListChange('year', 'chaoqituijin')
            } else if (params.name == '即将超期') {
              that.orderListChange('year', 'jijiangchaoqi')
            }
          })
        }
      })
    },
    // 获取数据 工单办理量
    async getGdblltjR () {
      this.$axios.post(this.$api.homeCharts.getGrGdblltjR).then(res => {
        if (res) {
          this.getGdblltj_r = res
          this.getGdblltj_r.showtextYPct = parseFloat(
            res.hbqnYPct.toFixed(2)
          ).toString()
          this.getGdblltj_r.showtextMPct = parseFloat(
            res.hbqnMPct.toFixed(2)
          ).toString()
          this.getGdblltj_r.showtextDPct = parseFloat(
            res.hbqnDPct.toFixed(2)
          ).toString()
          this.getGdblltj_r.hbqnYPct = Math.round(res.hbqnYPct)
          this.getGdblltj_r.hbqnMPct = Math.round(res.hbqnMPct)
          this.getGdblltj_r.hbqnDPct = Math.round(res.hbqnDPct)
        }
      })
    },
    // 获取数据 工单情况统计
    async getGdqktj () {
      this.$axios.post(this.$api.homeCharts.getGrGdqktj).then(res => {
        if (res) {
          this.orderState = [
            {
              title: '办理量',
              number: res.gdbblCurY,
              showTextVal: parseFloat(res.hbqnYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnYPct),
              state: res.addY,
              percentageColor: res.addY ? '#35ca1c' : '#ff3a3a',
              icon: res.addY ? 'rise' : 'decline'
            },
            {
              title: '满意率',
              number: res.curMydPct,
              showTextVal: parseFloat(res.hbqnMydYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnMydYPct),
              state: res.addMydY,
              percentageColor: res.addMydY ? '#35ca1c' : '#ff3a3a',
              icon: res.addMydY ? 'rise' : 'decline'
            },
            {
              title: '超期件',
              number: res.curCqj,
              showTextVal: parseFloat(res.hbqnCqjYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnCqjYPct),
              state: res.addCqjY,
              percentageColor: res.addCqjY ? '#ff3a3a' : '#35ca1c',
              icon: res.addCqjY ? 'rise3' : 'decline3'
            },
            {
              title: '平均回复周期',
              number: res.curAvgHf,
              showTextVal: parseFloat(
                Math.abs((res.lastAvgHf - res.curAvgHf).toFixed(2))
              ).toString(),
              percentage: Math.round(res.hbqnAvgHfYPct),
              state: res.addAvgHfY,
              percentageColor: res.addAvgHfY ? '#ff3a3a' : '#35ca1c',
              icon: res.addAvgHfY ? 'rise3' : 'decline3'
            },
            {
              title: '退单率',
              number: res.curThlPct,
              showTextVal: parseFloat(res.hbqnThlYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnThlYPct),
              state: res.addThlY,
              percentageColor: res.addThlY ? '#ff3a3a' : '#35ca1c',
              icon: res.addThlY ? 'rise3' : 'decline3'
            },
            {
              title: '办结率',
              number: res.curBjlPct,
              showTextVal: parseFloat(res.hbqnBjlYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnBjlYPct),
              state: res.addBjlY,
              percentageColor: res.addBjlY ? '#35ca1c' : '#ff3a3a',
              icon: res.addBjlY ? 'rise' : 'decline'
            },
            {
              title: '多次下发',
              number: res.multi,
              showTextVal: parseFloat(res.multiHuanbi.toFixed(2)).toString(),
              percentage: Math.round(res.multiHuanbi),
              state: res.multiAdd,
              percentageColor: res.multiAdd ? '#ff3a3a' : '#35ca1c',
              icon: res.multiAdd ? 'rise3' : 'decline3'
            }
          ]
        }
      })
      return
      const res = await getHomeGdqktj()
      let resData = res.data
      if (!resData) return
      this.orderState = [
        {
          title: '办理量',
          number: resData.gdbblCurY,
          showTextVal: parseFloat(resData.hbqnYPct.toFixed(2)).toString(),
          percentage: Math.round(resData.hbqnYPct),
          state: resData.addY,
          percentageColor: resData.addY ? '#35ca1c' : '#ff3a3a',
          icon: resData.addY ? 'rise' : 'decline'
        },
        {
          title: '满意率',
          number: resData.curMydPct,
          showTextVal: parseFloat(resData.hbqnMydYPct.toFixed(2)).toString(),
          percentage: Math.round(resData.hbqnMydYPct),
          state: resData.addMydY,
          percentageColor: resData.addMydY ? '#35ca1c' : '#ff3a3a',
          icon: resData.addMydY ? 'rise' : 'decline'
        },
        {
          title: '超期件',
          number: resData.curCqj,
          showTextVal: parseFloat(resData.hbqnCqjYPct.toFixed(2)).toString(),
          percentage: Math.round(resData.hbqnCqjYPct),
          state: resData.addCqjY,
          percentageColor: resData.addCqjY ? '#ff3a3a' : '#35ca1c',
          icon: resData.addCqjY ? 'rise3' : 'decline3'
        },
        {
          title: '平均回复周期',
          number: resData.curAvgHf,
          showTextVal: parseFloat(
            Math.abs((resData.lastAvgHf - resData.curAvgHf).toFixed(2))
          ).toString(),
          percentage: Math.round(resData.hbqnAvgHfYPct),
          state: resData.addAvgHfY,
          percentageColor: resData.addAvgHfY ? '#ff3a3a' : '#35ca1c',
          icon: resData.addAvgHfY ? 'rise3' : 'decline3'
        },
        {
          title: '退单率',
          number: resData.curThlPct,
          showTextVal: parseFloat(resData.hbqnThlYPct.toFixed(2)).toString(),
          percentage: Math.round(resData.hbqnThlYPct),
          state: resData.addThlY,
          percentageColor: resData.addThlY ? '#ff3a3a' : '#35ca1c',
          icon: resData.addThlY ? 'rise3' : 'decline3'
        },
        {
          title: '办结率',
          number: resData.curBjlPct,
          showTextVal: parseFloat(resData.hbqnBjlYPct.toFixed(2)).toString(),
          percentage: Math.round(resData.hbqnBjlYPct),
          state: resData.addBjlY,
          percentageColor: resData.addBjlY ? '#35ca1c' : '#ff3a3a',
          icon: resData.addBjlY ? 'rise' : 'decline'
        },
        {
          title: '多次下发',
          number: resData.multi,
          showTextVal: parseFloat(resData.multiHuanbi.toFixed(2)).toString(),
          percentage: Math.round(resData.multiHuanbi),
          state: resData.multiAdd,
          percentageColor: resData.multiAdd ? '#ff3a3a' : '#35ca1c',
          icon: resData.multiAdd ? 'rise3' : 'decline3'
        }
      ]
    },
    // 获取数据 全年月度工单处理量
    async getGdMonthForYear () {
      const that = this
      let res = await that.$api.getGrGdMonthForYear(that.systemYear)
      const sy_chartDom3 = document.getElementById('card8Echart')
      const sy_myChart3 = echarts.init(sy_chartDom3)
      const sy_option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#8e5dff'
            }
          },
          formatter: function (params) {
            let res = params[0].name
            const colorList = ['#a0c1ff', '#cb501d']
            params.forEach((item, index) => {
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                item.seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                item.value +
                '</span><span style="font-size: 10px;"> 件</span>'
            })
            return res
          }
        },
        legend: {
          selectedMode: false,
          x: 'right',
          y: '0px',
          icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemWidth: 10, // 设置宽度class
          itemHeight: 10, // 设置高度im
          itemGap: 40 // 设置间距i
        },
        grid: {
          left: '25px',
          right: '20px',
          bottom: '10px',
          top: '70px',
          containLabel: true
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#a0c1ff' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#9e8eff' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#cb501d' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#cf14a6' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 5
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          offset: 10,
          data: this.monthList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: res[0].year + '年',
            type: 'line',
            data: res[0].data,
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(158, 178, 255,0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          },
          {
            name: res[1].year + '年',
            type: 'line',
            data: res[1].data,
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(204, 71, 49,0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      sy_option3 && sy_myChart3.setOption(sy_option3)
      setTimeout(function () {
        window.onresize = function () {
          sy_myChart3.resize()
        }
      }, 100)
      sy_myChart3.on('click', function (param) {
        that.duration = 'month'
        that.date = param.seriesName.slice(0,param.seriesName.length-1) + '-' + param.name.slice(0, 2)
        that.orderListShow = true
      })
    },
    // 获取数据 个人办理量统计
    async getBmblTj () {
      const that = this
      this.$axios.post(this.$api.homeCharts.getGrblTj).then(res => {
        if (res == undefined) return
        const bm_chartDom1 = document.getElementById('bumen_card1Echart')
        const bm_myChart1 = echarts.init(bm_chartDom1)
        const bm_option1 = {
          legend: {
            selectedMode: false,
            x: 'right',
            y: '0px',
            icon: 'rect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
            itemWidth: 10, // 设置宽度class
            itemHeight: 10, // 设置高度im
            itemGap: 40 // 设置间距i
          },
          dataset: {
            dimensions: res.dimensions,
            source: res.source
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0, // 标签设置为全部显示
              formatter: function (params) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的字数
                var provideNumber = 10 // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }
            }
          },
          yAxis: {},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#fff'
              }
            },
            formatter: function (params) {
              let res = params[0].name
              const colorList = ['#33d7e1', '#8565ff']
              params.forEach((item, index) => {
                let data = JSON.stringify(item.data)
                  let newData = data.split(',')
                  let numArray = ['', '']
                newData.forEach(items => {
                  if (items.indexOf('年') > 0) {
                    let year = items.substr(0, items.indexOf(':'))
                    if (year.indexOf('{') == 0) {
                      year = year.substr(1, year.length)
                    }
                    year = JSON.parse(year)
                    if (year == item.seriesName) {
                      let num = items.substr(
                        items.indexOf(':') + 1,
                        items.length - items.indexOf(':')
                      )
                      if (num.indexOf('}') > 0) {
                        num = num.substr(0, num.length - 1)
                      }
                      numArray.splice(item.seriesIndex, 1, num)
                    }
                  }
                })
                res +=
                  '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                  colorList[index] +
                  ';margin-right:5px;"></span>' +
                  item.seriesName +
                  '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                  numArray[index] +
                  '</span><span style="font-size: 10px;"> 件</span>'
              })
              return res
            }
          },
          grid: {
            left: '10px',
            right: '10px',
            bottom: '10px',
            top: '60px',
            containLabel: true
          },
          series: [
            {
              type: 'bar',
              color: '#33d7e1',
              barWidth: 24,
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  let data = JSON.stringify(params.data)
                    let newData = data.split(',')
                    let numArray = ['', '']
                  newData.forEach(items => {
                    if (items.indexOf('年') > 0) {
                      let year = items.substr(0, items.indexOf(':'))
                      if (year.indexOf('{') == 0) {
                        year = year.substr(1, year.length)
                      }
                      year = JSON.parse(year)
                      if (year == params.seriesName) {
                        let num = items.substr(
                          items.indexOf(':') + 1,
                          items.length - items.indexOf(':')
                        )
                        if (num.indexOf('}') > 0) {
                          num = num.substr(0, num.length - 1)
                        }
                        numArray.splice(params.seriesIndex, 1, num)
                      }
                    }
                  })
                  if (numArray[0] > 0) {
                    return numArray[0]
                  } else {
                    return ''
                  }
                },
                color: '#33d7e1'
              },
              cursor: 'auto'
            },
            {
              type: 'bar',
              color: '#8565ff',
              barWidth: 24,
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  let data = JSON.stringify(params.data)
                    let newData = data.split(',')
                    let numArray = ['', '']
                  newData.forEach(items => {
                    if (items.indexOf('年') > 0) {
                      let year = items.substr(0, items.indexOf(':'))
                      if (year.indexOf('{') == 0) {
                        year = year.substr(1, year.length)
                      }
                      year = JSON.parse(year)
                      if (year == params.seriesName) {
                        let num = items.substr(
                          items.indexOf(':') + 1,
                          items.length - items.indexOf(':')
                        )
                        if (num.indexOf('}') > 0) {
                          num = num.substr(0, num.length - 1)
                        }
                        numArray.splice(params.seriesIndex, 1, num)
                      }
                    }
                  })
                  if (numArray[1] > 0) {
                    return numArray[1]
                  } else {
                    return ''
                  }
                },
                color: '#8565ff'
              },
              cursor: 'auto'
            }
          ]
        }
        bm_option1 && bm_myChart1.setOption(bm_option1)
        setTimeout(function () {
          window.onresize = function () {
            bm_myChart1.resize()
          }
        }, 100)
      })
    },
    // 获取数据 个人满意率统计
    async getBmMylTj () {
      this.$axios.post(this.$api.homeCharts.getGrMylTj).then(res => {
        if (res == undefined) return
        let echart2_label = []
        let echart2_data = []
        let echart2_data_type = []
        let echart2_data1 = []
        let bgData = []
        res.forEach(item => {
          echart2_label.push(item.sqName)
          echart2_data.push(item.curPct)
          if (item.add) {
            echart2_data_type.push('rise')
          } else {
            echart2_data_type.push('decline')
          }
          echart2_data1.push(item.huanbiPct.toFixed(2))
          bgData.push(100)
        })
        console.log('echart2_data', echart2_data)
        const bm_chartDom2 = document.getElementById('bumen_card2Echart')
        const bm_myChart2 = echarts.init(bm_chartDom2)
        const bm_option2 = {
          grid: {
            left: '0px',
            right: '0px',
            bottom: '0px',
            top: '30px',
            containLabel: true
          },
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              axisLabel: {
                show: true,
                margin: 15,
                textStyle: {
                  color: '#9ba3b1'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: echart2_label
            },
            {
              type: 'category',
              inverse: true,
              axisTick: 'none',
              axisLine: 'none',
              show: true,
              data: echart2_data1,
              axisLabel: {
                formatter: (params, index) => {
                  // 计算百分比
                  let type = echart2_data_type[index]
                  if (type == 'rise') {
                    // 数据上升
                    return `{rise|${'↗ '}}{incrementColor|${
                      echart2_data1[index]
                    }%}`
                  } else {
                    // 数据下降
                    return `{decline|${'↘ '}}{decrementColor|${
                      echart2_data1[index]
                    }%}`
                  }
                },
                rich: {
                  incrementColor: {
                    color: '#25d17f'
                  },
                  rise: {
                    color: '#25d17f',
                    fontWeight: '900',
                    fontSize: '16'
                  },
                  decrementColor: {
                    color: '#ff4444'
                  },
                  decline: {
                    color: '#ff4444',
                    fontWeight: '900',
                    fontSize: '16'
                  }
                },
                textStyle: {
                  fontSize: '14'
                }
              }
            }
          ],
          series: [
            {
              name: '满意率',
              type: 'bar',
              zlevel: 1,
              label: {
                show: true,
                position: ['80%', '20%'], // 位置
                color: '#ffffff',
                fontSize: 14,
                distance: 15, // 距离
                formatter: function (data) {
                  return data.value + '%'
                }
              }, // 柱子上方的数值
              itemStyle: {
                normal: {
                  barBorderRadius: [5, 5, 5, 5],
                  color: new echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: '#23d07f'
                      },
                      {
                        offset: 0.5,
                        color: '#f1bf50'
                      },
                      {
                        offset: 1,
                        color: '#f36d6c'
                      }
                    ],
                    false
                  ) // 渐变
                }
              },
              barWidth: 20,
              data: echart2_data,
              cursor: 'auto'
            },
            {
              name: '背景',
              type: 'bar',
              barWidth: 20,
              barGap: '-100%',
              data: bgData,
              itemStyle: {
                normal: {
                  color: '#e3e3e3',
                  barBorderRadius: [5, 5, 5, 5]
                }
              },
              cursor: 'auto'
            }
          ]
        }
        bm_option2 && bm_myChart2.setOption(bm_option2)
      })
    },
    // 获取数据 个人退件率
    async getBmThl () {
      this.$axios.post(this.$api.homeCharts.getGrThl).then(res => {
        if (res == undefined) return
        const colorList = [
          '#ee9a96',
          '#c49ef9',
          '#64b4f9',
          '#99a3f8',
          '#55c7e3',
          '#e1e2e3'
        ]
        res.forEach((item, index) => {
          let obj = {
            value: item.curPct.toFixed(2),
            name: item.sqName,
            color: colorList[index],
            state: item.add ? 'rise' : 'decline',
            stateVal: item.huanbiPct.toFixed(2)
          }
          this.tjList.push(obj)
        })
        const bm_chartDom3 = document.getElementById('bumen_card3Echart')
        const bm_myChart3 = echarts.init(bm_chartDom3)
        const bm_option3 = {
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return (
                params.seriesName +
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                params.color +
                ';margin-right:5px;"></span>' +
                params.name +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                params.value +
                '</span><span style="font-size: 10px;">%</span>'
              ) // 鼠标悬浮显示的字符串内容
            }
          },
          legend: {
            show: false,
            top: '0px',
            left: 'left',
            orient: 'vertical'
          },
          series: [
            {
              type: 'pie',
              name: '部门退件率',
              color: colorList,
              radius: '90%',
              avoidLabelOverlap: false,
              legendHoverLink: false,
              itemStyle: {
                borderRadius: 0,
                borderColor: '#fff',
                borderWidth: 5
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.tjList,
              cursor: 'auto'
            }
          ]
        }
        bm_option3 && bm_myChart3.setOption(bm_option3)
        bm_myChart3.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0
        }) // 设置默认高亮
      })
    },
    // 获取数据 个人办结率
    async getBmBjl () {
      this.$axios.post(this.$api.homeCharts.getGrBjl).then(res => {
        if (res == undefined) return
        const colorList = [
          '#8e5dff',
          '#5da9ff',
          '#40d9e3',
          '#22cc4e',
          '#fc1e86',
          '#ed8826',
          '#ee2626',
          '#e8ca00',
          '#b85a30',
          '#27aaa8',
          '#6b67ff',
          '#267024',
          '#6a137d',
          '#061dfb'
        ]
        res.forEach((item, index) => {
          let imgIndex = 0
          if (index < 9) {
            imgIndex = '0' + parseInt(index + 1)
          } else if (index >= 9 < 10) {
            imgIndex = parseInt(index + 1)
          } else {
            imgIndex = index
          }
          let obj = {
            sqName: item.sqName,
            progress: item.curPct,
            state: item.add ? 'rise' : 'decline', // rise-上升，decline-下降
            stateVal:
              item.huanbiPct != 100
                ? item.huanbiPct.toFixed(2)
                : item.huanbiPct,
            color: colorList[index],
            lineShow: true,
            barImg: require('../../../assets/images/bar_' + imgIndex + '.png')
          }
          this.card4Data.push(obj)
        })
      })
    },
    orderListChange (duration, orderType, multiDiliver) {
      // 年月日类型
      this.duration = duration
      // 状态类型
      this.orderType = orderType
      // 是否多次下发
      this.multiDiliver = multiDiliver
      this.orderListShow = true
    },
    clearSearch () {
      this.duration = null
      this.date = null
      this.orderType = null
      this.multiDiliver = null
    }
  }
}
</script>
<style lang="less" scoped>
.pageContent {
  .modular_1 {
    .card1Box {
      width: 750px;
    }
    .card2Box {
      width: 1110px;
    }
    .card1Box,
    .card2Box {
      height: 294px;
      .card1 {
        .index_card1Echart {
          width: 240px;
          height: 240px;
        }
        .card1EchartList {
          .card1EchartItem_l {
            line-height: 12px;
            width: 100px;
            span {
              display: inline-block;
              width: 13px;
              height: 13px;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          .card1EchartItem_c {
            width: 80px;
            margin-left: 20px;
            margin-right: 20px;
            span {
              margin-right: 6px;
            }
          }
        }
      }
    }
    .card2Box {
      .wordOrderItem {
        width: 280px;
        height: 190px;
        border-radius: 3px;
        margin-top: 38px;
        .content {
          width: 220px;
          z-index: 5;
        }
        .card_shadow {
          width: 152%;
          top: -10%;
          left: -26%;
          z-index: 0;
        }
      }
      .wordOrderItem:nth-child(1) {
        background-image: linear-gradient(to right, #5a78fd, #c87afd);
      }
      .wordOrderItem:nth-child(2) {
        background-image: linear-gradient(to right, #3daef6, #737bfc);
      }
      .wordOrderItem:nth-child(3) {
        background-image: linear-gradient(to right, #41d79c, #a7e25f);
      }
    }
    .orderStateItem {
      width: calc(100% - 180px / 7);
    }
    .orderStateItem:first-child {
      padding-left: 0;
    }
    .orderStateItem:last-child {
      border-right: 0;
    }
    .card8Box {
      height: 500px;
      .card8Echart {
        width: 1620px;
        height: 430px;
      }
    }
  }
  .modular_2 {
    .el-card {
      width: 100%;
      height: 100%;
    }
    .card1 {
      height: 400px;
      .bumen_card1Echart {
        width: 1620px;
        height: 340px;
      }
    }
    .card2 {
      width: 760px;
      height: 550px;
      .bumen_card2Echart {
        width: 700px;
        height: 500px;
      }
    }
    .card3 {
      width: 900px;
      height: 550px;
      .title_l_bg {
        left: 4px !important;
      }
      .bumen_card3Echart {
        width: 300px;
        height: 300px;
      }
      .card3EchartList {
        padding-right: 100px;
        margin-left: 110px;
        .card3EchartItem_l {
          line-height: 12px;
          width: 150px;
          span {
            display: inline-block;
            width: 13px;
            height: 13px;
            border-radius: 100%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .card3EchartItem_c {
          margin-left: 20px;
          margin-right: 20px;
          span {
            margin-right: 6px;
          }
          .card3EchartItem_c_l,
          .card3EchartItem_c_r {
            width: 120px;
            .trendImg {
              width: 10px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  .company {
    top: 60px;
    left: 30px;
  }
}
</style>
